<template>
    <div class="info-container plan-signed-detail-view">

        <el-form
                class="form-detail"
                label-position="right"
                label-width="120px"
                :inline="true"
        >

            <el-row :gutter="20" style="width:100%">

                <el-col :span="8">
                    <el-form-item label="产品通用名：">
                        {{ datas.planDetail?.productPopularName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="商品名：">
                        {{ datas.planDetail?.productName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="包装规格：">
                        {{ datas.planDetail?.packSpecs }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="生产厂家：">
                        {{ datas.planDetail?.producer }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="准入模式：">
                        {{ getLabel('access_mode', datas.planInfo?.accessMode) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端价：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="priceClick"
                        >
                            {{ datas.planInfo?.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo?.sellUnit) }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="招商终端名称：">

                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onTerminal"
                        >
                            {{ datas.planDetail?.terminalName }}
                        </el-link>

                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端地址：">
                        <span v-if="datas.planDetail.terProvinceName">{{
            datas.planDetail.terProvinceName
          }}/{{ datas.planDetail.terCityName }}/{{ datas.planDetail.terAreaName }}</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端类型：">
                        {{ getLabel('app_mode', datas.planInfo?.terminalType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="终端开发期限：">
                        {{ dateFormat('yyyy-mm-dd', datas.planDetail?.expireTime) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="开发保证金：">
                        <span v-if="datas.planDetail?.devEarnestMoney">{{ datas.planDetail?.devEarnestMoney }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="最低销量：">
                        <span v-if="datas.planDetail?.minSale">{{
            datas.planDetail?.minSale
          }}{{
            getLabel('sell_unit', datas.planInfo?.sellUnit)
          }}/{{ getLabel('sell_num_unit', datas.planDetail?.minSaleUnit) }}</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="销量保证金：">
                        <span v-if="datas.planDetail?.sellEarnestMoney">{{ datas.planDetail?.sellEarnestMoney }}元</span>
                        <span v-else>未设置</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="其他说明：">
                        <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
                        <span v-else>无</span>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="创建人：">
                        {{ datas.planDetail?.creatorName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="任务来源：">
                        <el-link
                                :underline="false"
                                style="display: flex;align-items: center"
                                type="primary"
                                @click="onPlan"
                        >
                            {{ datas.planDetail?.detailNo }}
                        </el-link>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="发布时间：">
                        {{ dateFormat('yyyy-mm-dd HH:MM',datas.planDetail?.createdAt) }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allData.saleTask.headId > 0">
                    <el-form-item label="完成职员" >
                        {{ allData.saleTask?.headName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8" v-if="allData.saleTask?.doneTime">
                    <el-form-item :label="allData.saleTask.headId > 0 ? '完成时间：' : '结束时间：'" >
                        {{ dateFormat('yyyy-mm-dd HH:MM',allData.saleTask?.doneTime) }}
                    </el-form-item>
                </el-col>

            </el-row>

        </el-form>

    </div>

    <div class="main-content">

        <el-tabs v-model="activeName" class="elTabs" @tab-click="handleClick">
            <el-tab-pane label="分配跟进信息" name="allocationView" v-if="allData.allocation && allData.allocation.length">
                <allocationView :datas="allData"/>
            </el-tab-pane>
            <el-tab-pane label="推荐代理" name="recommendView">
                <recommendView :datas="datas" />
            </el-tab-pane>
        </el-tabs>

    </div>

    <detail-drawer
            ref="detailDrawer"
            :size-width="1000"
            custom-title
    >
        <template #title>
            <span>{{ datas.planDetail?.terminalName }}</span>
        </template>
        <template #contents>

            <terminalInfo :id="datas.planDetail?.terminalId"/>

        </template>
    </detail-drawer>

</template>

<script>
    import { defineComponent, defineAsyncComponent, reactive, toRefs, watch } from 'vue'
    export default defineComponent({
        name: "fineDetail",
        emits:['plan','price'],
        components:{
            allocationView:defineAsyncComponent(() => import('./allocationView.vue')),
            recommendView:defineAsyncComponent(() => import('../../../planManagement/plan/detail/modules/recommendView.vue')),
            terminalInfo:defineAsyncComponent(() => import('../../../commonView/detailComponents/terminal/terminalInfo.vue')),
        },
        props:{
            datas:{
                type:Object,
                default:{}
            },
            allData:{
                type:Object,
                default:{}
            }
        },
        setup(props,{emit}){
            var data = reactive({
                activeName:'allocationView',
                detailDrawer:null,
            })

            watch(
                () => props.allData,
                (newV,oldV) => {
                    if (newV && (!newV.allocation || !newV.allocation.length)){
                        data.activeName = 'recommendView'
                    }
                },{deep:true,immediate:true}
            )

            const handleClick = () => {

            }

            const priceClick = () => {
                emit('price')
            }

            const onPlan = () => {
                emit('plan')
            }

            const onTerminal = () => {
                data.detailDrawer.open()
            }

            return{
                ...toRefs(data),

                handleClick,
                onPlan,
                priceClick,
                onTerminal,
            }
        }
    })
</script>

<style scoped>

</style>
